<template>
	<div class="HLAMatch">
		<div class="breadcrumb">
			<el-breadcrumb separator=">">
			  	<el-breadcrumb-item :to="{ path: '/kidney' }">新建</el-breadcrumb-item>
			  	<el-breadcrumb-item>配型</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		
		<div class="HLAMatch-wrap">
			<right-header :header-name="headerName" :is-show="true" @headmethod="back"
				:trans-number="transNumber" :show-border="true" btn-text="返回" ></right-header>
			<el-steps :space="type=='1'?200:500" :active="type=='1'?3:1" :center="true" :align-center="true" class="steps">
			  	<el-step title="新建候选名单" v-if="type=='1'"></el-step>
			  	<el-step title="确认候选者／等待配型" v-if="type=='1'"></el-step>
			  	<el-step title="HLA配型"></el-step>
			  	<el-step title="选择配型患者"></el-step>
			</el-steps>
			<!-- <el-form class="form-wrap" :inline="true" label-position="right" :model="hlaForm" ref="hlaForm"> -->
				<div class="base-infor">
					<div class="title">
						供体HLA信息
					</div>
					<div class="main">
						<div class="main-item">
			        		<div class="item">
						  		<div class="lable">供体血型</div>
						  		<span class="text">AB</span>
						  	</div>
			        	</div>
						<div class="main-item">
							<div class="item">
								<div class="lable">供体HLA</div>
								<div class="text">
									<!-- <el-form-item label="DR" prop="DR1" class="block"> -->
									<div class="s-item">
										<span class="s-lable">DR</span>
							    		<el-input type="text" v-model="hlaForm.DR1" auto-complete="off" class="input"></el-input>
							    		<el-input type="text" v-model="hlaForm.DR2" auto-complete="off" class="input"></el-input>
									</div>
										
								  	<!-- </el-form-item> -->
					        		<!-- <el-form-item label="A" prop="A1"  class="block"> -->
					        		<div class="s-item">
					        			<span class="s-lable">A</span>
							    		<el-input type="text" v-model="hlaForm.A1" auto-complete="off" class="input"></el-input>
							    		<el-input type="text" v-model="hlaForm.A2" auto-complete="off" class="input"></el-input>
					        		</div>
					        			
								  	<!-- </el-form-item> -->
								  	<!-- <el-form-item label="B" prop="B1"  class="block"> -->
								  	<div class="s-item">
								  		<span class="s-lable">B</span>
							    		<el-input type="text" v-model="hlaForm.B1" auto-complete="off" class="input"></el-input>
							    		<el-input type="text" v-model="hlaForm.B2" auto-complete="off" class="input"></el-input>
								  	</div>
								  		
								  	<!-- </el-form-item> -->
								</div>
							</div>
			        	</div>
			        	<div class="main-item">
				        	<div class="item">
				        		<div class="lable">供体术前四项</div>
				        		<div class="text">
				        			<div class="s-item">
					        			<!-- <el-form-item label="乙肝表面抗原" prop="A" > -->
					        				<span class="m-lable">乙肝表面抗原</span>
								    		<el-select v-model="hlaForm.A" class="select margin">
										      	<el-option label="阴性" value="A"></el-option>
										      	<el-option label="阳性" value="B"></el-option>
										    </el-select>
									  	<!-- </el-form-item> -->
									  	<!-- <el-form-item label="丙型肝炎抗体" prop="B"> -->
									  		<span class="m-lable">丙型肝炎抗体</span>
								    		<el-select v-model="hlaForm.B" class="select">
										      	<el-option label="阴性" value="A"></el-option>
										      	<el-option label="阳性" value="B"></el-option>
										    </el-select>
								    	<!-- </el-form-item> -->
					        		</div>
					        		<div class="s-item">
									  	<!-- <el-form-item label="人免疫缺陷病毒抗体" prop="C" > -->
									  		<span class="m-lable">人免疫缺陷病毒抗体</span>
								    		<el-select v-model="hlaForm.C" class="select margin">
										      	<el-option label="阴性" value="A"></el-option>
										      	<el-option label="阳性" value="B"></el-option>
										    </el-select>
									  	<!-- </el-form-item> -->
									  	<!-- <el-form-item label="梅毒螺旋体抗体" prop="D"> -->
									  		<span class="m-lable">梅毒螺旋体抗体</span>
								    		<el-select v-model="hlaForm.D" class="select">
										      	<el-option label="阴性" value="A"></el-option>
										      	<el-option label="阳性" value="B"></el-option>
										    </el-select>
									  	<!-- </el-form-item> -->
						        	</div>
				        		</div>
				        		
				        	</div>
					    </div>
					    <div class="btn-wrap">
				            <el-button type="primary" @click="submitForm()">立即配型</el-button>
				        </div>
				    </div>
			    </div>
			<!-- </el-form> -->
		</div>
		
	</div>
</template> 

<style lang='scss' rel='stylesheet/scss'>
	.HLAMatch{
		.HLAMatch-wrap{
			padding: 0 20px;
			.base-infor{
				// height: 390px;
				box-sizing: border-box;
				.input{
					width: 86px;
				}
				.select{
					width: 120px;
				}
				.el-input__inner{
					height: 30px;
				}
				.main{
					padding: 20px 10px;
					.main-item{
						.item{
							margin-bottom: 10px;
							.lable{
								width: 110px;
								padding-right: 20px;
							}
							.s-item{
								margin-bottom: 10px;
								.s-lable{
									width: 25px;
									display: inline-block;
								}
								.m-lable{
									width: 150px;
									display: inline-block;
								}
								.margin{
									margin-right: 150px;
								}
							}
						}
						.text{
							.block{
								display: block;
							}
						}
					}
				}
			}
			.btn-wrap{
				margin-bottom: 0;
			}
		}
		
	}

</style>

<script>
	import rightHeader from '@/components/rightHeader'
	import pagination from '@/components/pagination'
	export default {
		data() {
			return {
				headerName: '肾源配型',
				transNumber: '000016',
				type: this.$route.params.type,
				hlaForm: {
					DR1:'',
					DR2:'',
					A1:'',
					A2:'',
					B1:'',
					B2:'',
					A:'',
					B:'',
					C:'',
					D:''

				}
			}
		},
		components: {
			'right-header': rightHeader,
			'v-pagination':pagination
		},
		methods: {
			back(){
				var self = this;
				if(self.type=='1'){
          			self.$router.push('/kidney/waitMatch');
          		}else if(self.type=='2'){
          			self.$router.push('/kidney/waitMatch');
          		}
			},
			submitForm(){
		    	var self = this;
		    	if(self.type=='1'){
          			self.$router.push('/kidney/chooseMatch/1');
          		}else if(self.type=='2'){
          			self.$router.push('/kidney/chooseMatch/2');
          		}
		    	// self.$refs[formName].validate((valid) => {
		     //      	if (valid) {
		     //      		if(self.type=='1'){
		     //      			self.$router.push('/kidney/chooseMatch/1');
		     //      		}else if(self.type=='2'){
		     //      			self.$router.push('/kidney/chooseMatch/2');
		     //      		}
		          		
		     //      	} else {
		     //        	console.log('error submit!!');
		     //        	return false;
		     //      	}
       //  		});
		    }
		}
	}
</script>
